<template>
  <div class="personal-area">
    <div class="container">
      <h3 class="title">基本信息</h3>
      <div class="group">
        <div class="item" v-for="item in getUserOption('base')" :key="item.key">
          <p class="name">{{ item.label }}</p>
          <p class="value">
            {{ getText(item.key) }}
            <span class="btn" @click="onUpdate(item)" v-if="item.editable"
              >修改</span
            >
          </p>
        </div>
      </div>
      <h3 class="title">账号信息</h3>
      <div class="group">
        <div
          class="item"
          v-for="item in getUserOption('account')"
          :key="item.key"
        >
          <p class="name">{{ item.label }}</p>
          <p class="value">
            {{ getText(item.key) }}
            <span class="btn" @click="onUpdate(item)" v-if="item.editable"
              >修改</span
            >
          </p>
        </div>
      </div>
    </div>
    <PersonalModal
      v-model:visible="visible"
      :userInfo="userInfo"
      :item="item"
      @onOk="onOk"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, reactive, toRefs } from 'vue';
import { useStore } from 'vuex';
import { GenderMap } from '@/global/constant/objectMap';
import { UserOption } from '@/views/personal/constant';
import PersonalModal from '@/views/personal/components/PersonalModal.vue';

export default defineComponent({
  name: 'PersonalArea',
  components: {
    PersonalModal,
  },
  setup() {
    const store = useStore();
    const state = reactive({
      item: {},
      visible: false,
    });
    const userInfo = computed(() => store.state.root.userInfo);
    const getUserOption = (type: string) => {
      return UserOption.filter((it) => it.group === type);
    };
    const getText = (key: string) => {
      const val: any = userInfo.value[key];
      switch (key) {
        case 'gender':
          return (GenderMap as any)[val];
        case 'password':
          return '********';
        default:
          return val ?? '-';
      }
    };
    const onUpdate = async (item: { [key: string]: any }) => {
      state.item = item;
      state.visible = true;
    };
    const onOk = async (key: string, data: any) => {
      if (key === 'password') {
        const { password, newPassword } = data;
        store.dispatch('personal/updatePassword', {
          password,
          newPassword,
        });
      } else {
        store.dispatch('personal/updateUserinfo', {
          key,
          value: data.curProp,
        });
      }
    };

    return {
      ...toRefs(state),
      userInfo,
      getUserOption,
      getText,
      onUpdate,
      onOk,
    };
  },
});
</script>

<style lang="less" scoped>
.personal-area {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  transition: all 0.5s;
  background-color: @rb-body-background;
  .container {
    padding: 24px;
    .title {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      height: 22px;
      line-height: 22px;
      margin-bottom: 8px;
      &:before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: @rb-primary-color;
        border-radius: 2px;
        margin-right: 12px;
      }
    }
    .group {
      margin-bottom: 24px;
      border: 1px solid @rb-border-color-base;
      .item {
        .flexRow(flex-start);
        line-height: 46px;
        height: 47px;
        border-bottom: 1px solid @rb-border-color-base;
        &:last-child {
          border-bottom: none;
        }
        .name {
          width: 200px;
          padding: 0 24px;
          background-color: @rb-background-color;
          color: @rb-text-color-secondary;
        }
        .value {
          flex: 1;
          padding: 0 24px;
          // border-bottom: 1px solid @rb-background-color-light;
          .btn {
            display: inline-block;
            margin-left: 24px;
            color: @rb-primary-color;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
